<template>
  <div>
    <div class="shopcar_box">
      <div class="shopcar_container">
        <van-swipe-cell v-for="(item, index) in list" :key="index">
          <van-card
            :price="item.price"
            :desc="item.desc"
            :title="item.title"
            class="goods-card"
            :thumb="item.thumb"
          >
            <template #bottom>
              <van-stepper
                v-model="item.cont"
                theme="round"
                button-size="22"
                disable-input
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              class="button"
              square
              text="删除"
              type="danger"
              @click="onClick(item.id)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <div class="parice">
        <h3>总价:{{ sum }}￥</h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      list: [
        {
          id: 1,
          price: 62.0,
          desc: "鬼刀",
          title: "鬼刀小姐姐",
          thumb: "./1.jpg",
          cont: 1,
        },
        {
          id: 2,
          price: 69.0,
          desc: "鬼刀",
          title: "鬼刀小姐姐",
          thumb: "./2.jpg",
          cont: 1,
        },
        {
          id: 3,
          price: 100.0,
          desc: "鬼刀",
          title: "鬼刀小姐姐",
          thumb: "./3.jpg",
          cont: 1,
        },
        {
          id: 4,
          price: 250.0,
          desc: "鬼刀",
          title: "鬼刀小姐姐",
          thumb: "./4.jpg",
          cont: 1,
        },
        {
          id: 5,
          price: 142.0,
          desc: "鬼刀",
          title: "鬼刀小姐姐",
          thumb: "./5.jpg",
          cont: 1,
        },
        {
          id: 6,
          price: 8522.0,
          desc: "鬼刀",
          title: "鬼刀小姐姐",
          thumb: "./6.jpg",
          cont: 1,
        },
        {
          id: 7,
          price: 7422.0,
          desc: "鬼刀",
          title: "鬼刀小姐姐",
          thumb: "./7.png",
          cont: 1,
        },
      ],
    };
  },
  computed: {
    sum() {
      var sum = 0;
      this.list.forEach((item) => {
        sum += item.cont * item.price;
      });
      return sum;
    },
  },
  methods: {
    onClick(id) {
      this.list.forEach((item,index) => {
          if (item.id==id) {
              this.list.splice(index,1)
          }
      });
    },
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.shopcar_box {
  width: 100%;
  margin-bottom: 15vh;
  .shopcar_container {
    width: 100%;
    background-color: skyblue;
    .button {
      height: 100%;
    }
    .van-stepper {
      text-align: right;
    }
  }
  .parice {
    width: 100%;
    height: 5vh;
    background-color: pink;
    z-index: 1000;
    position: fixed;
    bottom: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>